<!-- 布匹库存 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
		  <view slot="bottom">
		    <template>
		      <view class="flex flex-sa f-35">
		        <view class="f-35">
		          <view class="flex flex-c f-32 text-color"> 总米数 </view>
		          <view class="flex flex-c f-30 m-b-10"> 3 </view>
		        </view>
		        <view class="f-35">
		          <view class="flex flex-c f-32 text-color"> 总码数 </view>
		          <view class="flex flex-c f-30 m-b-10"> 3 </view>
		        </view>
				<view class="f-35">
				  <view class="flex flex-c f-32 text-color"> 总公斤 </view>
				  <view class="flex flex-c f-30 m-b-10"> 0 </view>
				</view>
		      </view>
			  <view class="flex flex-sa  m-b-20">
			  	<view class="flex flex-c f-28 text-color"> 总米数 274 </view>
			  </view>
			  <view class="flex flex-sa nav-view">
			  	<view class="flex flex-c f-28" style="flex: 1;">
					<template v-if="true">
						<text class="m-r-10" style="color: #60b4f6;">明细仓</text>
						<u-icon name="close" color="#60b4f6" size="10"></u-icon>
					</template>
					<template v-else>
						<text class="m-r-10">全部库存</text>
						<u-icon name="arrow-down-fill" color="#bbb"></u-icon>
					</template>
			  	</view>
				<view class="flex flex-c f-28">
					<input class="inp-view" type="text" placeholder="产品" placeholder-style="color: #999;">
				</view>
			  </view>
		    </template>
		  </view>
		</hx-navbar>
		<view class="list-view">
			<view class="flex list-item">
				<view class="img-view">
					<image class="pic" src="https://cdn.uviewui.com/uview/example/button.png" mode="widthFix"></image>
				</view>
				<view class="con-view">
					<view class="title-view f24 m-b-10">
						<text class="m-r-10">001</text>
						<text>20001</text>
					</view>
					<view class="flex flex-sb bot-view">
						<view class="l-view">
							36匹
						</view>
						<view class="mi-view">
							-4191.5米
						</view>
					</view>
				</view>
			</view>
			<view class="flex list-item">
				<view class="img-view">
					<image class="pic" src="https://cdn.uviewui.com/uview/example/button.png" mode="widthFix"></image>
				</view>
				<view class="con-view">
					<view class="title-view f24 m-b-10">
						<text class="m-r-10">001</text>
						<text>20001</text>
					</view>
					<view class="flex flex-sb bot-view">
						<view class="l-view">
							36匹
						</view>
						<view class="mi-view">
							-4191.5米
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import clIcon from "@/components/cl-icon/cl-icon.vue";
	export default {
		name: '',
		components: {
		  clIcon
		},
		data() {
			return {
				search: null,
				config: {
				  title: "布匹库存",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe6d1;",
				      position: "left",
				    },
				    {
				      key: "btn2",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
			}
		},
		methods: {
			searchChange() {
			  this.goodSpuDataArr = [];
			  this.pages.current = 1;
			  this.initData();
			},
			clickBtn(item) {
			  // console.log("index", item);
			  if (item.key === "btn1") {
			    this.$Router.push({
			      name: "financeAccountDetails",
			    });
			  } else if (item.key === "btn2") {
			    // this.productPopShow = !this.productPopShow;
			  }
			},
		}
	}
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
.text-color {
	color: #e9e9e9;
}
.nav-view {
	background-color: #fff;
	height: 80rpx;
	color: #999;
	.inp-view {
		flex: 1;
		text-align: center;
		color: #333;
	}
}
.list-view {
	margin-top: 260rpx;
	padding: 0 20rpx;
	.list-item {
		background-color: #fff;
		box-shadow: 4rpx 6rpx 16rpx #c7c7c7;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.img-view {
			width: 90rpx;
			height: 90rpx;
			.pic {
				width: 100%;
				height: 100%;
			}
		}
		.con-view {
			flex: 1;
			padding-left: 20rpx;
			.title-view {
				color: #999;
			}
			.l-view {
				color: #115701;
			}
			.mi-view {
				color: #f00;
			}
		}
		
	}
}
</style>